<template>
  <div>
    <!-- 身体整体开始 -->
    <div class="client-body">
      <div class="red-thread"></div>
      <div class="content">
        <!-- 内置滚动条 -->
        <!-- <el-scrollbar style="height: 100%"> -->
        <div class="top">
          <div class="top-t">
            <div class="top-t-1"><i class="el-icon-download"></i></div>
            &nbsp;&nbsp;
            <p>其他操作系统客户端</p>
          </div>
          <div class="top-d">
            <!-- 左边 -->
            <div class="top-left">
              <div class="top-left-1">在电脑上听</div>
              <img src="../assets/images/app-3.png" alt="" />
              <div class="top-left-2">
                <div class="top-left-2-1">
                  <img src="../assets/images/app-3-1.png" alt="" />
                </div>
                <div class="top-left-2-2">
                  <img src="../assets/images/app-3-2.png" alt="" />
                </div>
              </div>
              <a
                style="color: #d10000"
                href="https://music.163.com/stat/?web=pc&from=download&t=1655707870685&redirect=https%3A%2F%2Fmusic.163.com%2Fapi%2Fpc%2Fpackage%2Fdownload%2Flatest"
                >
                <div class="top-left-3">下载电脑端</div>
                </a>
            </div>
            <!-- 右边 -->
            <div class="top-right">
              <div class="top-right-1">在手机上听</div>
              <img src="../assets/images/app-4.png" alt="" />
              <div class="top-right-2">
                <div class="top-right-2-1">
                  <img src="../assets/images/app-4-1.png" alt="" />
                </div>
                <div class="top-right-2-2">
                  <img src="../assets/images/app-4-2.png" alt="" />
                </div>
              </div>
              <a href="">
                <div class="top-right-3">下载手机端</div>
              </a>
            </div>
          </div>
        </div>
        <div class="code">
          <img src="../assets/images/app-2.jpg" alt="" />
          <p>扫描二维码下载</p>
        </div>
        <div class="down">
          <div class="down-1">
            <div class="down-body-1">
              <div class="down-1-1">
                <h3>千万曲库 首首CD音质</h3>
                <p>
                  囊括百万无损SQ音乐，你在用手机听歌时，<br />
                  也能感受到纤毫毕现的CD音质，更能免费离线收听
                </p>
              </div>
              <div class="down-1-2">
                <img src="../assets/images/app-a.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="down-2">
            <div class="down-body-2">
              <div class="down-2-1">
                <img src="../assets/images/app-b.jpg" alt="" />
              </div>
              <div class="down-2-2">
                <h3>千位明星 亲自推荐音乐</h3>
                <p>
                  韩红，戴佩妮等
                  <em>千位明星已入驻</em>
                  ， 亲自创建私房歌单，录制独<br />
                  家DJ节目，推荐他们心中的好音乐
                </p>
              </div>
            </div>
          </div>
          <div class="down-3">
            <div class="down-body-3">
              <div class="down-3-1">
                <h3>社交关系 发现全新音乐</h3>
                <p>
                  你可以关注明星、DJ和好友，通过浏览他们的动态、收藏和<br />
                  分享，发现更多全新好音乐
                </p>
              </div>
              <div class="down-3-2">
                <img src="../assets/images/app-c.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="down-4">
            <div class="down-body-4">
              <div class="down-4-1">
                <img src="../assets/images/app-d.jpg" alt="" />
              </div>
              <div class="down-4-2">
                <h3>手机电脑 歌单实时同步</h3>
                <p>
                  只要一个帐号，你就可以同步在手机、电脑上创建、收藏<br />
                  的歌单，<em>随时随地畅享好音乐</em>
                </p>
              </div>
            </div>
          </div>
          <div class="down-5">
            <div class="down-body-5">
              <div class="down-5-1">
                <h3>听歌识曲 助你疯狂猜歌</h3>
                <p>
                  歌曲很动听却不知道歌名，歌名在嘴边却想不起来……<br />
                  用<em>听歌识曲</em>功能，几秒钟就知道歌名
                </p>
              </div>
              <div class="down-5-2">
                <img src="../assets/images/app-e.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.client-body {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/app1.jpg");
  background-size: cover;
}
.red-thread {
  height: 5px;
  border-bottom: none;
  box-sizing: border-box;
  background-color: #c20c0c;
  position: relative;
}
/* 二维码开始 */
.code {
  position: fixed;
  padding: 16px 18px 9px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
  border-radius: 10px;
  color: #333;
  font-size: 13px;
  text-align: center;
  width: 136px;
  height: 153px;
  top: 400px;
  right: 0;
}
.code > img {
  width: 120px;
  height: 120px;
  border: 0;
}
.code > p {
  margin-top: 10px;
  color: #333333;
  font-weight: 600;
}
/* 二维码结束 */

/* 滚动条设置开始 */
.content {
  width: 100%;
  height: 100%;
}
/* 下载页面开始 */
.top {
  position: relative;
  width: 1150px;
  height: 100%;
  margin: 0 auto;
  padding: 112px 0;
  /* border: 1px solid red; */
}
.top-t {
  /* border: 1px solid #e3e3e3; */
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  width: 160px;
  display: inline-flex;
}
.top-t-1 {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #888888;
  border-radius: 50%;
}
.top-t-1 > .el-icon-download {
  color: #222;
  font-weight: 1000;
}
.top-t > p {
  line-height: 20px;
  width: 150px;
}
.top-d {
  display: flex;
}
.top-left {
  display: block;
  width: 560px;
  height: 100%;
  text-align: center;
  /* border: 1px solid sienna; */
}
.top-left-1 {
  margin-bottom: 33px;
  height: 100%;
  width: 100%;
  font-size: 22px;
  opacity: 0.8;
  color: #ffffff;
  text-align: center;
}
.top-left > img {
  width: 557px;
  height: 328px;
  margin: 0 auto 3px;
}
.top-left-2 {
  display: flex;
  margin: 26px 0 26px 90px;
  text-align: center;
}
.top-left-2-1 > img {
  height: 30px;
  height: 44px;
  border-radius: 5px;
}

.top-left-2-2 > img {
  padding-left: 40px;
  height: 44px;
  border-radius: 5px;
}
.top-left-3 {
  width: 300px;
  height: 65px;
  line-height: 65px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 65px;
  font-size: 22px;
  color: #d10000;
}

.top-right {
  margin-left: 220px;
  display: block;
  width: 320px;
  height: 100%;
  text-align: center;
}
.top-right-1 {
  margin-bottom: 33px;
  height: 100%;
  width: 100%;
  font-size: 22px;
  opacity: 0.8;
  color: #ffffff;
  text-align: center;
}
.top-right > img {
  width: 300px;
  height: 330px;
  margin: 0 auto;
}
.top-right-2 {
  display: flex;
  margin: 26px 0 26px 0;
  text-align: center;
}
.top-right-2-1 > img {
  height: 30px;
  height: 44px;
  border-radius: 5px;
}

.top-right-2-2 > img {
  padding-left: 40px;
  height: 44px;
  border-radius: 5px;
}
.top-right-3 {
  width: 300px;
  height: 65px;
  line-height: 65px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 65px;
  font-size: 22px;
  color: #d10000;
}
/* 下载页面结束 */

/* down页面 */
.down {
  height: 100%;
  font-size: 12px;
  color: #333;
  background: #fff;
}
em {
  color: #cc0000;
  text-align: left;
  font-size: 200;
}

/* 1 */
.down-1 {
  height: 437px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}
.down-body-1 {
  width: 982px;
  padding-top: 120px;
  margin: 0 auto;
}
.down-1-1 {
  margin-left: 30px;
  float: left;
}
.down-1-1 > h3 {
  font-size: 40px;
  font-weight: 500;
  padding: 45px 0 5px 0;
}
.down-1-1 > p {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}
.down-1-2 {
  margin-right: 57px;
  float: right;
}

/* 2*/
.down-2 {
  height: 437px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}

.down-body-2 {
  width: 982px;
  margin: 0 auto;
  padding-top: 106px;
}
.down-2-1 {
  margin-left: 30px;
  float: left;
}
.down-2-2 {
  float: right;
}
.down-2-2 > h3 {
  font-size: 40px;
  font-weight: 500;
  padding: 45px 0 5px 0;
}
.down-2-2 > p {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}

/* 3 */
.down-3 {
  height: 437px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}
.down-body-3 {
  width: 982px;
  padding-top: 120px;
  margin: 0 auto;
}
.down-3-1 {
  margin-left: 30px;
  float: left;
}
.down-3-1 > h3 {
  font-size: 40px;
  font-weight: 500;
  padding: 45px 0 5px 0;
}
.down-3-1 > p {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}
.down-3-2 {
  margin-right: 57px;
  float: right;
}

/* 4 */
.down-4 {
  height: 437px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}
.down-body-4 {
  width: 982px;
  margin: 0 auto;
  padding-top: 106px;
}
.down-4-1 {
  margin-left: 30px;
  float: left;
}
.down-4-2 {
  float: right;
}
.down-4-2 > h3 {
  font-size: 40px;
  font-weight: 500;
  padding: 45px 0 5px 0;
}
.down-4-2 > p {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}

/* 5 */
.down-5 {
  height: 437px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}
.down-body-5 {
  width: 982px;
  padding-top: 53px;
  margin: 0 auto;
}
.down-5-1 {
  margin-left: 30px;
  float: left;
}
.down-5-1 > h3 {
  font-size: 40px;
  font-weight: 500;
  padding: 45px 0 5px 0;
  margin-top: 96px;
}
.down-5-1 > p {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}
.down-5-2 {
  margin-right: 57px;
  float: right;
}
</style>